<template>
  <div id='addshop'>
    <div class='addinfo'>
      <div class='addinfobox'>
        <div class='title'>
          {{cominfo}}</div>
        <div
          class='addinfolist'>
          <el-form ref="form"
            :model="form"
            size="medium "
            label-width="80px">
            <el-form-item
              label="*分类ID">
              <el-input
                v-model="form.categoryId">
              </el-input>
            </el-form-item>
            <el-form-item
              label="*父分类ID">
              <el-input
                v-model="form.pCategoryId">
              </el-input>
            </el-form-item>
            <el-form-item
              label="商品名称">
              <el-input
                v-model="form.name">
              </el-input>
            </el-form-item>
            <el-form-item
              label="商品描述">
              <el-input
                v-model="form.desc">
              </el-input>
            </el-form-item>
            <el-form-item
              label="商品价格">
              <el-input
                v-model="form.price">
              </el-input>
            </el-form-item>
            <el-form-item
              label="商品详情">
              <el-input
                type="textarea"
                v-model="form.detail">
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                @click="add">
                立即创建
              </el-button>
              <el-button
                @click='send'>
                取消
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'addshop',
  data() {
    return {
      categoryname: '',
      form: {
        categoryId: '',
        pCategoryId: '',
        name: '',
        desc: '',
        price: '',
        detail: '',
        imgs: [],
      },
      dialogVisible: false,
      imageUrl: '',
      tempUrl: '',
    }
  },
  props: ['cominfo', 'parentid'],
  methods: {
    send() {
      this.flag = false
      this.$emit('func', this.flag)
    },
    add() {
      if (this.form.categoryId && this.form.pCategoryId && this.form.name) {
        this.$axios({
          method: 'post',
          url: '/manage/product/add',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          params: this.form,
        }).then((res) => {
          console.log(res.data.status)
          if (res.data.status != 1) {
            this.$message.success('添加商品成功')
            this.$emit('func', this.flag)
            this.$emit('get')
          } else {
            this.$message.error('异常操作，商品名称未重复，关键信息已填写')
          }
        })
      } else {
        this.$message.error('请填写完整信息')
      }
    },
  },
}
</script>

<style lang='less'>
#addshop {
  background-color: #fff;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  .addinfo {
    z-index: 999;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 4px;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    padding-top: 20px;
    box-sizing: border-box;
    .title {
      text-align: center;
      overflow: hidden;
      font-size: 18px;
      font-weight: 700;
    }
    .addinfobox {
      background-color: #fff;
      border-radius: 4px;
      width: 100%;
      height: 100%;
    }
    .addinfolist {
      position: absolute;
      top: 50px;
      left: 50%;
      margin-left: -143px;
    }
  }
  .el-form-item {
    margin-top: 20px;
  }
}
</style>